<template>
  <div class="zl">

    <header>
      <h4>个人资料</h4>
      <i class="iconfont" @click="changePath">&#xe615;</i>
    </header>
    <div class="my_div avatar">头像
      <img :src="avatar" alt="">
    </div>
    <div class="my_div">昵称</div>
    <div class="my_div">性别</div>
    <div class="my_div qm">签名</div>
    <div class="my_div">生日</div>
    <div class="my_div">所在城市</div>
  </div>
</template>

<script>
  /**
   * 我的个人资料
   */
  export default {
    name: "MyZl",
    data() {
      return {
        avatar: require('../../assets/imgs/home/team-image-7.jpg')

      }
    },
    methods: {
      changePath() {
        this.$router.push('/my')
      }
    }
  }
</script>

<style scoped lang="less">
  .zl {
    header {
      color: #FFFFFF;
      width: 100%;
      height: 50px;
      background-color: #181718;

      i {
        float: left;
        margin-left: 20px;
        padding-top: 20px;
      }

      h4 {
        font-weight: 500;
        letter-spacing: 4px;
        position: absolute;
        top: 15px;
        left: 45%;
      }
    }

    div {
      width: 100%;
      height: 7.5px;
      background-color: #efefef;
    }

    .my_div {
      color: #171818;
      font-size: 15px;
      letter-spacing: 3px;
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      box-sizing: border-box;
      background-color: #FFFFFF;
      text-align: left;
      border-bottom: 1px solid #efefef;
    }

    .my_div.qm {
      border-bottom: 7.5px solid #efefef;
    }

    .avatar {
      height: 70px;
      line-height: 70px;

      img {
        width: 36px;
        height: 36px;
        border-radius: 100%;
        float: right;
        margin-right: 20px;
        margin-top: 10px;
      }
    }
  }
</style>
